<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center merchanDisedetails_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view>
					<benben-flex-tabs class-name='merchanDisedetails_benbenTabsfd0_0' v-model="tabs"
						ref="benben_tabsfd0_0" select-mark="benben_tabsfd0_0" key="benben_tabsfd0_0"
						:open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false'
						:scrollspy='false' :tabs-info.sync="tabsInfofd0_0">

						<view class='flex flex-wrap align-center merchanDisedetails_leftfd0_0_c0'
							@tap.stop="handleJumpDiy" data-type="back" data-url="1">
							<text class='fu-iconfont2'>&#xe794;</text>
						</view>

						<scroll-view @scroll="tabsInfofd0_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd0_0"
							class="benben-tabs" style="width:750rpx" :scroll-x="true"
							:scroll-left.sync="tabsInfofd0_0.moveX" scroll-with-animation="all .3s ease">
							<view class="benben-tabs-content" style="font-family: Alimama DongFangDaKai;"
								id="benben_tabsfd0_0-content">
								<view id="benben_tabsfd0_0-title"
									class="benben-tabs-title flex align-center justify-center flex ">
									<view
										:class="{ 'checkTitlefd0_0': tabs == '1', 'flex flex-wrap align-center merchanDisedetails_titlefd0_0_c3': true }"
										@tap="scrollToAnchor(1)" :id="`benben_tabsfd0_0-title-item-${'1'}`">

										<text class='merchanDisedetails_titleItemfd0_0_c4_c0'>商品</text>

									</view>
									<view
										:class="{ 'checkTitlefd0_0': tabs == '2', 'flex flex-wrap align-center merchanDisedetails_titlefd0_0_c3': true }"
										@tap="scrollToAnchor(2)" :id="`benben_tabsfd0_0-title-item-${'2'}`">

										<text class='merchanDisedetails_titleItemfd0_0_c4_c0'>评论</text>

									</view>
									<view
										:class="{ 'checkTitlefd0_0': tabs == '3', 'flex flex-wrap align-center merchanDisedetails_titlefd0_0_c3': true }"
										@tap="scrollToAnchor(3)" :id="`benben_tabsfd0_0-title-item-${'3'}`">

										<text class='merchanDisedetails_titleItemfd0_0_c4_c0'>详情</text>

									</view>
								</view>
								<view :style="{ left: tabsInfofd0_0.lineleft, maxWidth: tabsInfofd0_0.lineWidth ,}"
									id="benben_tabsfd0_0-line"
									class="benben-tabs-line flex benben-flex-tabs-line merchanDisedetails_linefd0_0">
								</view>
							</view>
						</scroll-view>

						<view style="width: 100rpx;"></view>

					</benben-flex-tabs>

				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

			<SelectAddr ref="selectAddr" v-model="popupShow1698314536945" :cAddrId="addressInfo.address_id"
				@confirm="addrConfirm" />

			<!---轮播flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout merchanDisedetails_flex_2">
				<view style="position: relative" id="jianjie" class="jianjie">
					<swiper ref="benbenSwiperfd2_0" :current='index' @change="bannerIndexfd2_0 = $event.detail.current"
						class='flex position-relative merchanDisedetails_fd2_0' previous-margin="0rpx"
						next-margin="0rpx" :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true'
						:circular='true'>

						<template v-for='(url,key0) in bannerList'>
							<swiper-item class='flex  merchanDisedetails_fd2_0' :key='key0'>
								<image :src="url" mode="aspectFill" class="merchanDisedetails_fd2_0_c1_c0"
									@click="multiImagePreview(url,bannerList)"></image>
							</swiper-item>
						</template>

					</swiper>
					<view style="position: absolute"
						class="flex dot flex align-center justify-center merchanDisedetails_swiperDotfd2_0">
						<view class='flex flex align-center justify-center merchanDisedetails_numberfd2_0_c0'>
							<text class='merchanDisedetails_numberfd2_0_c0_c0'>{{bannerIndexfd2_0+1}}</text>
							<text class='merchanDisedetails_numberfd2_0_c0_c0'>/</text>
							<text class='merchanDisedetails_numberfd2_0_c0_c2'>{{(bannerList.length)}}</text>
						</view>

					</view>
				</view>
				<view class='flex flex-wrap align-center flex-sub productDetails_fd2_1'
					style="padding:22rpx 28rpx 22rpx 32rpx;" v-if="goodData.data_type == 3">
					<text class='productDetails_fd2_1_c0'>预售
						商品</text>
					<view class='flex flex-direction flex-wrap flex-sub align-stretch productDetails_fd2_1_c1'>
						<view class='flex flex-wrap align-center productDetails_fd2_1_c1_c0'>
							<text class='productDetails_fd2_1_c1_c0_c0'>定金</text>
							<text class='productDetails_fd2_1_c1_c0_c1'>￥</text>
							<text class=' productDetails_fd2_1_c1_c0_c2'>
								<text
									class=' productDetails_price1_fd2_1_c1_c0_c2'>{{ goodData.deposit_price | frontPrice }}</text>
								<text
									class=' productDetails_price2_fd2_1_c1_c0_c2'>{{ goodData.deposit_price | laterPrice }}</text>
							</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<text class='productDetails_fd2_1_c1_c1_c0'>预售价</text>
							<text class='productDetails_fd2_1_c1_c1_c1'>￥</text>
							<text class=' productDetails_fd2_1_c1_c1_c2'>
								<text
									class=' productDetails_price1_fd2_1_c1_c1_c2'>{{ goodData.shop_price | frontPrice }}</text>
								<text
									class=' productDetails_price1_fd2_1_c1_c1_c2'>{{ goodData.shop_price | laterPrice }}</text>
							</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-center productDetails_fd2_1_c2'>
						<text class='productDetails_fd2_1_c2_c0'>距预售结束仅剩</text>
						<benben-countdown class=' productDetails_fd2_1_c2_c1' :show-day='true' :show-hour='true'
							:show-minute='true' :show-second='true' :time-type='false' :count-time="fd2_1_c2_c1">
							<template #default="{ d, h, i, s }">
								<text class='productDetails_fd2_1_c2_c1_c0'>{{d}}</text>

								<text class='productDetails_fd2_1_c2_c1_c1'>天</text>

								<text class='productDetails_fd2_1_c2_c1_c2'>{{h}}</text>

								<text class='productDetails_fd2_1_c2_c1_c1'>:</text>

								<text class='productDetails_fd2_1_c2_c1_c4'>{{i}}</text>

								<text class='productDetails_fd2_1_c2_c1_c1'>:</text>

								<text class='productDetails_fd2_1_c2_c1_c6'>{{s}}</text>

								<text></text>
							</template>
						</benben-countdown>
					</view>
				</view>
				<view v-else class='flex flex-wrap align-center flex-sub merchanDisedetails_fd2_1'
					style="align-items: baseline;">
					<text class='merchanDisedetails_fd2_1_c0'>￥</text>
					<text class=' merchanDisedetails_fd2_1_c1'>
						<text class=' merchanDisedetails_price1_fd2_1_c1'>{{ goodData.shop_price | frontPrice }}</text>
						<text class=' merchanDisedetails_price2_fd2_1_c1'>{{ goodData.shop_price | laterPrice }}</text>
					</text>
					<view class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_1_c2'>
						<view class='flex flex-wrap align-center'>
							<text class='merchanDisedetails_fd2_1_c2_c0_c0'>价格￥</text>
							<text class=' merchanDisedetails_fd2_1_c2_c0_c1'>
								<text
									class=' merchanDisedetails_price1_fd2_1_c2_c0_c1'>{{ goodData.original_price | frontPrice }}</text>
								<text
									class=' merchanDisedetails_price2_fd2_1_c2_c0_c1'>{{ goodData.original_price | laterPrice }}</text>
							</text>
						</view>
					</view>
					<view class='flex flex-wrap align-center merchanDisedetails_fd2_1_c3'>
						<view class='flex flex-wrap align-center merchanDisedetails_fd2_1_c3_c0'>
						</view>
						<text class='merchanDisedetails_fd2_1_c3_c1'>销量{{goodData.sales_sum||0}}件</text>
					</view>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_2'>
					<view class='flex justify-between'>
						<view class='merchanDisedetails_fd2_2_c0_c0'>{{goodData.goods_name}}</view>
						<view style="text-align: center;">
							<image v-if="goodData.is_collect == 1" class='merchanDisedetails_fd2_2_c0_c1' mode="aspectFit"
								:src='STATIC_URL+"544.png"' @click="collectFn"></image>
							<image v-else class='merchanDisedetails_fd2_2_c0_c1' mode="aspectFit"
								:src='STATIC_URL+"599.png"' @click="collectFn"></image>
							<view style="font-size: 20rpx;font-weight: 500;" v-if="goodData.is_collect == 1">已收藏</view>
							<view style="font-size: 20rpx;font-weight: 500;" v-else>收藏</view>
						</view>
					</view>
					<!-- <view class='flex flex-wrap align-center merchanDisedetails_fd2_2_c1'>
						<text class='merchanDisedetails_fd2_2_c1_c0'>库存：{{goodData.stock||0}} |
							销量：{{goodData.sales_sum||0}}</text>
					</view> -->
				</view>
				<view v-if="GOOD_TYPE.YU_SHOU == goodData.data_type"
					class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_3'>
					<view class='flex flex-wrap align-center'>
						<text class='merchanDisedetails_fd2_3_c0_c0'>尾款</text>
						<view class='flex flex-wrap align-center flex-sub merchanDisedetails_fd2_3_c0_c1'>
							<text class='merchanDisedetails_fd2_3_c0_c1_c0'>￥</text>
							<text class=' merchanDisedetails_fd2_3_c0_c1_c1'>
								<text
									class=' merchanDisedetails_price1_fd2_3_c0_c1_c1'>{{ goodData.residue_price | frontPrice }}</text>
								<text
									class=' merchanDisedetails_price1_fd2_3_c0_c1_c1'>{{ goodData.residue_price | laterPrice }}</text>
							</text>
						</view>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='merchanDisedetails_fd2_3_c1_c0'>流程</text>
						<view class='flex flex-wrap align-center flex-sub merchanDisedetails_fd2_3_c1_c1'>
							<text class='merchanDisedetails_fd2_3_c1_c0'>流程</text>
							<text class='merchanDisedetails_fd2_3_c1_c1_c1'>1.付定金 - 2.付尾款 - 3.发货</text>
							<view class="merchanDisedetails_fd2_3_c1_c1_c2 big_tap_area" @click="isShowYushouRule=true">
								<u-image width="100%" height="100%" border-radius="8rpx" lazy-load
									:src='STATIC_URL+"600.png"' />
							</view>
						</view>
					</view>
				</view>

				<view class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_4'>
					<view v-if="goodData.is_open_sku == 1" class='flex align-center' @click="openSpec">
						<text class='merchanDisedetails_fd2_4_c0_c0'>规格</text>
						<view class='flex flex-wrap align-center flex-sub merchanDisedetails_fd2_4_c0_c1'>
							<input class='merchanDisedetails_fd2_4_c0_c1_c0' type="text" :placeholder="'请选择规格'" confirm-type="done" :maxlength="-1" :disabled='true' v-model="classification.spec_item_name"
								placeholder-style="color:#999;font-size:28rpx" />
							<image class='merchanDisedetails_fd2_4_c0_c1_c1' mode="aspectFit" :src='STATIC_URL+"594.png"'></image>
						</view>
					</view>
					<!-- <view class='flex flex-wrap align-center' style="border-bottom: 1rpx solid #eee;">
						<text class='merchanDisedetails_fd2_4_c0_c0'>送至</text>
						<view class='flex flex-wrap align-center flex-sub merchanDisedetails_fd2_4_c0_c1'
							@tap.stop="popupShow1698314536945=true">
							<image class='merchanDisedetails_fd2_4_c1_c1_c0' mode="aspectFit"
								:src='STATIC_URL+"602.png"'></image>
							<view class='merchanDisedetails_fd2_4_c1_c1_c1'>
								{{addressInfo.province||""}}
								{{addressInfo.city||""}}
								{{addressInfo.district||""}}
								{{addressInfo.address||""}}
							</view>
							<image class='merchanDisedetails_fd2_4_c1_c1_c2' mode="aspectFit"
								:src='STATIC_URL+"594.png"'></image>
						</view>
					</view> -->
					<!-- <view v-if="addressInfo.address_id" class='flex flex-wrap align-center'>
						<text class='merchanDisedetails_fd2_4_c0_c0'>运费</text>
						<view class='flex flex-wrap align-center flex-sub merchanDisedetails_fd2_4_c0_c1'
							@tap.stop="popupShow1698312822883=true">
							<text class='merchanDisedetails_fd2_4_c2_c1_c0'>{{goodData.freight_fee}}</text>
							<image class='merchanDisedetails_fd2_4_c0_c1_c1' mode="aspectFit"
								:src='STATIC_URL+"594.png"'></image>
						</view>
					</view> -->
					<view v-if="goodData.is_open_sku == 0" class='flex flex-wrap align-center justify-between'>
						<text class='merchanDisedetails_fd2_4_c0_c0'>数量</text>
						<view class="flex align-center justify-center flex-direction merchanDisedetails_fd2_3_c1_c1">
							<uni-number-box v-if="goodData.max_buy_num" v-model="buyNum" :min="1" :step="1"
								:max="goodData.max_buy_num"></uni-number-box>
							<uni-number-box v-else :min="1" :step="1" v-model="buyNum"></uni-number-box>
							<view v-if="goodData.max_buy_num-0"
								style="padding: 24rpx;margin:0 0 0 auto;width:max-content;color:#62889B;">
								此商品限购{{goodData.max_buy_num}}件</view>
						</view>
					</view>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_5 pinglun' id="pinglun">
					<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="'/pages/grzx/evaluates/evaluates?id='+id">
						<image class='merchanDisedetails_fd2_5_c0_c0' mode="aspectFit" :src='STATIC_URL+"604.png"'>
						</image>
						<text class='merchanDisedetails_fd2_5_c0_c1'>商品评价({{goodData.comment_nums}})</text>
						<text class='merchanDisedetails_fd2_5_c0_c2'>好评率{{goodData.comment_rate}}</text>
						<image class='merchanDisedetails_fd2_5_c0_c3' mode="aspectFit" :src='STATIC_URL+"603.png"'>
						</image>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_5_c1'
						v-for="item in comment_list" :key="item.id">
						<view class='flex flex-wrap align-start flex-sub'>
							<image class='merchanDisedetails_fd2_5_c1_c0_c0' mode="aspectFill" :src='item.head_img'>
							</image>
							<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
								<view
									class='flex flex-wrap align-center justify-between merchanDisedetails_fd2_5_c1_c0_c1_c0'>
									<text class='merchanDisedetails_fd2_5_c1_c0_c1_c0_c0'>{{item.user_nickname}}</text>
									<text class='merchanDisedetails_fd2_5_c1_c0_c1_c0_c1'>{{(item.create_time)}}</text>
								</view>
								<view class='flex flex-wrap align-center'>
									<template v-for="starNum in [1,2,3,4,5]">
										<image v-if="item.stars >= starNum" :key="starNum"
											class='merchanDisedetails_star1fd2_5_c1_c0_c1_c1' mode="aspectFit"
											:src='STATIC_URL+"81.png"'></image>
										<image v-else :key="starNum" class='merchanDisedetails_star1fd2_5_c1_c0_c1_c1'
											mode="aspectFit" :src='STATIC_URL+"240.png"'></image>
									</template>
								</view>
							</view>
						</view>
						<text class='merchanDisedetails_fd2_5_c1_c1'>{{item.content}}</text>
						<view class='flex flex-wrap align-center' v-if="item.images && item.images.length">
							<view class='flex flex-wrap align-center merchanDisedetails_fd2_5_c1_c2_c0'>
								<view v-for="(url,index) in item.images" class="merchanDisedetails_fd2_5_c1_c2_c0_c0">
									<u-image width="100%" height="100%" border-radius="8rpx" lazy-load :src='url' />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view id="xiangqing" class='flex flex-direction flex-wrap align-stretch merchanDisedetails_fd2_6 xiangqing' style="margin-top: 24rpx;">
					<view class='flex flex-wrap align-center merchanDisedetails_fd2_6_c0'>
						<image class='merchanDisedetails_fd2_5_c0_c0' mode="aspectFit" :src='STATIC_URL+"604.png"'>
						</image>
						<text class='merchanDisedetails_fd2_6_c0_c1'>商品详情</text>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch'>
						<u-parse :html="goodData.body" />
					</view>
				</view>
			</view>

			<!---轮播flex布局结束-->

			<DescPopup v-model="popupShow1698312822883" tt="运费说明" :desc="goodData.freight_desc" />

			<DescPopup v-model="isShowYushouRule" tt="预售说明" :desc="yushouRule" />

			<!---规格flex布局结束-->
			<benben-popup v-model="popupShow1653961165769" :mask="true" mode='bottom'>
				<!---规格弹窗flex布局开始-->
				<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout commoDity_flex_6">
					<view class='flex flex-direction flex-wrap align-stretch commoDity_fd6_0'>
						<view class='flex flex-wrap align-center commoDity_fd6_0_c0'>
							<image class='commoDity_fd6_0_c0_c0' mode="aspectFill" :src='classification.sku_img'>
							</image>
							<view class='flex flex-wrap align-center flex-sub'>
								<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
									<view class='flex flex-wrap align-center' style="margin-bottom: 16rpx;">
										<text class='commoDity_fd6_0_c0_c1_c0_c0_c0_1'>￥</text>
										<text class='commoDity_fd6_0_c0_c1_c0_c0_c0'>{{classification.shop_price}}</text>
									</view>
									<view style="display: flex;color: #999;">
										<view class='flex flex-wrap align-center commoDity_fd6_0_c0_c1_c0_c1'>
											<text class='commoDity_fd6_0_c0_c1_c0_c1_c0'>库存：</text>
											<text class='commoDity_fd6_0_c0_c1_c0_c1_c1'>{{classification.stock}}</text>
										</view>
										<view class='flex flex-wrap align-center' style="margin-left: 40rpx;">
											<text class='commoDity_fd6_0_c0_c1_c0_c2_c0'>已选择：</text>
											<text
												class='commoDity_fd6_0_c0_c1_c0_c2_c1'>{{classification.spec_item_name}}</text>
										</view>
									</view>
								</view>
								<view class="close-box">
									<text class="cuIcon-close" @tap="popupShow1653961165769=false"></text>
								</view>
							</view>
						</view>
						<view class='flex flex-direction flex-wrap align-stretch commoDity_fd6_0_c1'
							v-for="(v, k) in goodData.goods_spec" :key="k">
							<text class='commoDity_fd6_0_c1_c0'>{{v.name}}</text>
							<view>
								<view class='flex align-center justify-center flex commoDity_fd6_0_c1_c1_c1'
									:class="item.isSelect ? 'is_select' : ''" v-for='(item,key) in v.child' :key="key">
									<text class="commoDity_fd6_0_c1_c1_c1_c0"
										@tap="selectSpec(k, key)">{{item.item}}</text>
								</view>
							</view>
						</view>
						<view class='flex  align-start commoDity_fd6_0_c3'>
							<text class='commoDity_fd6_0_c3_c0'>购买数量</text>

							<view class="flex align-center justify-center" style="flex-direction: column;">
								<uni-number-box v-if="goodData.max_buy_num" v-model="buyNum" :min="1" :step="1"
									:max="goodData.max_buy_num"></uni-number-box>
								<uni-number-box v-else :min="1" :step="1" v-model="buyNum"></uni-number-box>
								<view v-if="goodData.max_buy_num-0"
									style="padding: 24rpx;margin:0 0 0 auto;width:max-content;color:#62889B;">
									此商品限购{{goodData.max_buy_num}}件</view>
							</view>
						</view>

						<view style="height: 12rpx;"></view>
						<block v-if="GOOD_TYPE.WEN_CHUANG == goodData.data_type">
							<view class="footer_btn flex align-center justify-between"
								style="padding: 32rpx 20rpx calc(32rpx + env(safe-area-inset-bottom));">
								<view class="footer_btn_1" @tap.stop="addCard">加入购物车</view>
								<view class="footer_btn_2" @tap.stop="toBuyGood">立即购买</view>
							</view>
						</block>
						<block v-else>
							<button class='commoDity_fd6_0_c4' style="font-family: Alimama DongFangDaKai;"
								@click="toBuyGood">支付定金</button>
						</block>
					</view>
				</view>
				<!---规格弹窗flex布局结束-->
			</benben-popup>

			<view class="flex benben-position-layout flex flex-wrap align-center merchanDisedetails_flex_5">
				<button class='flex flex-direction flex-wrap align-center merchanDisedetails_fd5_0' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/xitongs/ContactUs/ContactUs`">
					<image class='merchanDisedetails_fd5_0_c0' mode="aspectFill" :src='STATIC_URL+"511.png"'></image>
					<text class='merchanDisedetails_fd5_0_c1' style="line-height: 1.2;">客服</text>
				</button>
				<!-- <button @click="popupShow1692100153978=true" class='flex flex-direction flex-wrap align-center'
					style="background-color: transparent;height: auto;">
					<image class='merchanDisedetails_fd5_0_c0' mode="aspectFit" :src='STATIC_URL+"607.png"'></image>
					<text class='merchanDisedetails_fd5_0_c1' style="line-height: 1.2;">分享</text>
				</button> -->
				<block v-if="GOOD_TYPE.YU_SHOU == goodData.data_type">
					<button class='merchanDisedetails_fd5_4'
						style="flex:1;margin:0 24rpx;"
						@tap.stop="toBuyGood">支付定金</button>
				</block>
				<block v-if="GOOD_TYPE.WEN_CHUANG == goodData.data_type">
					<view @tap.stop="toCar"
						class='flex flex-direction flex-wrap align-center merchanDisedetails_fd5_2'>
						<image class='merchanDisedetails_fd5_0_c0' mode="aspectFit" :src='STATIC_URL+"608.png"'></image>
						<text class='merchanDisedetails_fd5_0_c1' style="line-height: 1.2;">购物车</text>
					</view>
					<button class='merchanDisedetails_fd5_3'
						@tap.stop="addCard">加入购物车</button>
					<button class='merchanDisedetails_fd5_4'
						style="flex:1;"
						@tap.stop="toBuyGood">立即购买</button>
				</block>

			</view>
			<view :style="{height: '115rpx'}"></view>

		</view>

		<benben-popup v-model="popupShow1692100153978" :mask="true" :mask-close-able="true" mode='bottom'>
			<!---fxflex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
				<view class='flex flex-direction flex-wrap align-stretch search_fd6_0'
					style="font-family: Alimama DongFangDaKai;">
					<view class='flex flex-wrap align-center justify-between search_fd6_0_c0'>
						<view class='flex flex-wrap align-center search_fd6_0_c0_c0'>
						</view>
						<view class='flex flex-wrap align-center justify-center search_fd6_0_c0_c1'>
							<image class='search_fd6_0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"645.png"'></image>
							<text class='search_fd6_0_c0_c1_c1'>分享到</text>
							<image class='search_fd6_0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"644.png"'></image>
						</view>
						<view class='flex flex-wrap align-center search_fd6_0_c0_c2'>
							<image class='search_fd6_0_c0_c2_c0' mode="aspectFit" :src='STATIC_URL+"129.png"'
								@tap="popupShow1692100153978=false"></image>
						</view>
					</view>
					<view class='flex flex-wrap align-center justify-around search_fd6_0_c1'>
						<button open-type="share" class='flex flex-direction flex-wrap align-center'
							style="background-color: transparent;">
							<image class='search_fd6_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"174.png"'></image>
							<text class='search_fd6_0_c1_c0_c1'>微信好友</text>
						</button>
						<button open-type="share" class='flex flex-direction flex-wrap align-center'
							style="background-color: transparent;">
							<image class='search_fd6_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"175.png"'></image>
							<text class='search_fd6_0_c1_c0_c1'>朋友圈</text>
						</button>
					</view>
				</view>
			</view>

			<!---fxflex布局结束-->

		</benben-popup>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import {
		goodModuleMixin
	} from './goodModuleMixin'
	import {
		yushouMixin
	} from './yushouMixin'
	import DescPopup from "./DescPopup.vue"
	import {
		GOOD_TYPE
	} from "@/const/index"
	import SelectAddr from "./SelectAddr.vue"
	import {
		formMixin
	} from './formMixin'
	export default {
		components: {
			DescPopup,
			SelectAddr,
		},
		mixins: [goodModuleMixin, yushouMixin, formMixin, ],
		data() {
			return {
				GOOD_TYPE,
				"popupShow1698312822883": false,
				"bannerIndexfd2_0": 0,
				"fd2_5_c1_c0_c1_c1": 3,
				"popupShow1698314536945": false,
				"tabsInfofd0_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0
				},
				"coupon": "0",
				"integral": "500",
				"sorts": [{
					"name": "精粹液",
					"value": "1",
					"image": ""
				}, {
					"name": "面霜",
					"value": "2",
					"image": ""
				}],
				"sor": "1",
				"milliliter": [{
						"name": "100ml",
						"value": "1",
						"image": ""
					}, {
						"name": "150ml",
						"value": "2",
						"image": ""
					},
					{
						"name": "200ml",
						"value": "3",
						"image": ""
					},
					{
						"name": "300ml",
						"value": "4",
						"image": ""
					}
				],
				"ml": "1",
				"dataDetails": {
					"name": "",
					"thumb": "",
					"integralcategory_name": "",
					"images": [],
					"market_price": "",
					"shop_price": "",
					"integral": "",
					"stock": "",
					"description": "",
					"body": "",
					"status": "",
					"sort": "",
					"integralcategory_id": "",
					"status_name": "",
					"is_use_score": "",
					"order_list": []
				},
				"index": 1,
				"address_id": "",
				"dataAddress": [],
				"tabs": "1",
				"commodity_id": "8",
				"id": "346",
				popupShow1692100153978: false,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			isLogin() {
				return this.$store.state.token == '' ? false : true;
			},
			userInfo: {
				get() {
					return this.$store.state.userInfo
				},
				set() {
					this.$store.commit('updateUserInfo', value)
				},
			},
			isLogin() {
				return this.$store.state.token == '' ? false : true;
			}
		},
		onShareAppMessage() {
			return this.getShareInfo();
		},
		onShareTimeline() {
			return this.getShareInfo();
		},
		onLoad(options) {
			let {
				commodity_id,
				id
			} = options
			if (commodity_id !== undefined) this.commodity_id = commodity_id
			if (id !== undefined) this.id = id
			this.getgoodFn();
			uni.$on("UPDATE_ADDRESS_LIST", () => {
				this.getgoodFn();
				this.$refs.selectAddr.getAddrList();
			})
		},
		onUnload() {
			uni.$off("UPDATE_ADDRESS_LIST")
		},
		methods: {
			// 锚点定位
			scrollToAnchor(type) {
				this.tabs = type;
				if (type == 1) {
					let id1 = '#jianjie';
					let calssText1=".jianjie";
					uni.createSelectorQuery().select(id1).boundingClientRect(rect => {
						if (rect) {
							// 获取到了目标元素的信息，进行滑动操作
							this.$nextTick(() => {
								const query = uni.createSelectorQuery();
								query.select(calssText1).scrollOffset((res) => {
									// res.scrollTop表示容器已经滚动的高度
									// rect.top表示目标元素与容器顶部之间的距离
									// 计算出需要滚动的距离
									let distance = res.scrollTop + rect.top - 50; // 这里的50是调整滚动位置的偏移量
								
									// 开始滚动
									uni.pageScrollTo({
										selector: '.container',
										duration: 200, // 滚动持续时间（单位ms）
										scrollTop: distance, // 滚动到指定位置
									});
								}).exec();
							})
						} else {
							console.log('未找到目标元素');
						}
					}).exec();
				} else if (type == 2) {
					let id2 = '#pinglun';
					let calssText2=".pinglun";
					uni.createSelectorQuery().select(id2).boundingClientRect(rect => {
						if (rect) {
							// 获取到了目标元素的信息，进行滑动操作
							this.$nextTick(() => {
								const query = uni.createSelectorQuery();
								query.select(calssText2).scrollOffset((res) => {
									// res.scrollTop表示容器已经滚动的高度
									// rect.top表示目标元素与容器顶部之间的距离
									// 计算出需要滚动的距离
									let distance = res.scrollTop + rect.top - 50; // 这里的50是调整滚动位置的偏移量
								
									// 开始滚动
									uni.pageScrollTo({
										selector: '.container',
										duration: 200, // 滚动持续时间（单位ms）
										scrollTop: distance, // 滚动到指定位置
									});
								}).exec();
							})
						} else {
							console.log('未找到目标元素');
						}
					}).exec();
				} else if (type == 3) {
					let id3 = '#xiangqing';
					let calssText3 =".xiangqing";
					uni.createSelectorQuery().select(id3).boundingClientRect(rect => {
						if (rect) {
							// 获取到了目标元素的信息，进行滑动操作
							this.$nextTick(() => {
								const query = uni.createSelectorQuery();
								query.select(calssText3).scrollOffset((res) => {
									// res.scrollTop表示容器已经滚动的高度
									// rect.top表示目标元素与容器顶部之间的距离
									// 计算出需要滚动的距离
									let distance = res.scrollTop + rect.top - 50; // 这里的50是调整滚动位置的偏移量
								
									// 开始滚动
									uni.pageScrollTo({
										selector: '.container',
										duration: 200, // 滚动持续时间（单位ms）
										scrollTop: distance, // 滚动到指定位置
									});
								}).exec();
							})
						} else {
							console.log('未找到目标元素');
						}
					}).exec();
				}
				
			},
			
			
			
			toCar() {
				if (uni.getStorageSync('USER_TOKEN')) uni.navigateTo({
					url: "/pages/grzx/myNews/shoppingCart"
				})
				else uni.navigateTo({
					url: "/pages/tabBar/passwordLogin/passwordLogin"
				})
			},
			/** 获取分享信息 */
			getShareInfo() {
				return {
					title: "我和国潮小剧在这里等您",
					path: "/pages/grzx/merchanDisedetails/merchanDisedetails?id=" + this.id
				}
			},
			/** 显示sku */
			showSkuFn() {
				this.classification = this.goodData.goods_sku[0] || {};
				this.popupShow1653961165769 = true;
			},
			/** 地址选中 */
			addrConfirm(info = {}) {
				this.addressInfo = {
					...info
				};
				this.getgoodFn();
			},
			/** 改变收藏 */
			async collectFn() {
				try {
					const res = await this.$post('6551ce7f7659d', {
						goods_id: this.id
					})
					this.$msg(res.msg)
					this.getgoodFn();
				} catch (e) {
					this.$msg(e?.msg || "失败")
				}
			},
			//跳转支付
			goPayFunc() {
				if (this.isLogin === true) {
					if (this.dataDetails.is_use_score == '1') {
						this.$urouter.navigateTo(
							`/pages/grzx/orderSure/orderSure?goods_id=${this.commodity_id}&address_id=${this.address_id}&number=&activity_id=&sku_id=&invoice_id=`
							);
					}
				} else {
					this.$message.info('请先登录');
					this.toLoginDiy();
				}
			},
			//积分商城-积分商品详情
			async getDetailFunc() {
				//请求方法
				//数据验证

				let datadataDetails = await this.$api.get(global.apiUrls.post6414599749e7f, {
					aid: this.commodity_id,
					user_id: this.userInfo.id
				});

				if (datadataDetails.data.code != 1) {
					this.$message.info(datadataDetails.data.msg);
					return
				}
				let infodataDetails = datadataDetails.data;
				this.dataDetails = infodataDetails.data
			},
			//获取默认地址
			async getAddressFunc() {
				if (this.isLogin === true) {
					//请求方法
					//数据验证

					let datadataAddress = await this.$api.get(global.apiUrls.post636f7683cf195, {

					});

					if (datadataAddress.data.code != 1) {
						this.$message.info(datadataAddress.data.msg);
						return
					}
					let infodataAddress = datadataAddress.data.data;
					this.dataAddress = infodataAddress.data
					if (this.dataAddress) {
						this.address_id = this.dataAddress[0].aid
						console.log(this.address_id);
					}
				}
			},
			//加入购物车
			TocartFunc() {
				this.$urouter.navigateTo(`/pages/gwc/shoppingCart/shoppingCart`);
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import "./merchanDisedetails.scss";

	.commoDity_flex_6 {
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 100rpx 0rpx 0rpx 0rpx;
	}


	.commoDity_fd6_0 {
		background: #fff;
		background-size: 100% !important;
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		max-height: 1000rpx;
	}

	.commoDity_fd6_0_c0 {
		margin: 30rpx 32rpx 0rpx 32rpx;
	}

	.commoDity_fd6_0_c0_c0 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: -80rpx 24rpx 0rpx 0rpx;
	}

	.commoDity_fd6_0_c0_c1_c0_c0_c0 {
		font-size: 40rpx;
		font-weight: 700;
		color: #EF3A3A;
		margin: 0rpx 8rpx 0rpx 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c0_c0_1 {
		font-size: 28rpx;
		font-weight: 700;
		color: #EF3A3A;
		margin: 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c0_c1 {
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		line-height: 28rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c1 {
		margin: 0rpx 0rpx 8rpx 0rpx;
		transform: translateY(4rpx);
	}

	.commoDity_fd6_0_c0_c1_c0_c1_c0 {
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c1_c1 {
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c2_c0 {
		word-wrap: break-word;
		font-size: 24rpx;
	}

	.commoDity_fd6_0_c0_c1_c0_c2_c1 {
		word-wrap: break-word;
		font-size: 24rpx;
	}

	.commoDity_fd6_0_c0_c1_c0_c2_c2 {
		word-wrap: break-word;
		font-size: 24rpx;
	}

	.commoDity_fd6_0_c0_c1_c1 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.commoDity_fd6_0_c1 {
		margin: 32rpx 32rpx 0rpx 32rpx;
	}

	.commoDity_fd6_0_c1_c0 {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 24rpx 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c1_c1_c0 {
		border: 1px solid #AD3823;
		background: #FFFFFF;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.commoDity_fd6_0_c1_c1_c0_c0 {
		font-size: 28rpx;
		font-weight: 500;
		color: #AD3823;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c1_c1_c1 {
		border: 1px solid #F8F8F8;
		background: #F8F8F8;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		float: left;
	}

	.is_select {
		border: 1px solid #F35D2A;
		background: #FFF0ED;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		float: left;
		color: #F35D2A !important;
	}

	.commoDity_fd6_0_c1_c1_c1_c0 {
		font-size: 28rpx;
		font-weight: 400;
		// color: rgba(51, 51, 51, 1);
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c2 {
		margin: 24rpx 32rpx 0rpx 32rpx;
	}

	.commoDity_fd6_0_c2_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 24rpx 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c2_c1_c0 {
		border: 1px solid #AD3823;
		background: #FFFFFF;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.commoDity_fd6_0_c2_c1_c0_c0 {
		font-size: 28rpx;
		font-weight: 500;
		color: #AD3823;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c2_c1_c1 {
		border: 1px solid #BFBFBF;
		background: #FFFFFF;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.commoDity_fd6_0_c2_c1_c1_c0 {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c3 {
		margin: 30rpx 32rpx 30rpx 32rpx;
	}

	.commoDity_fd6_0_c3_c0 {
		margin: 0rpx auto 0rpx 0rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		word-wrap: break-word;
	}

	::v-deep .commoDity_numberBoxInputfd6_0_c3_c1 {
		border: 1px solid #DCDCDC;
		background: #fff;
		background-size: 100% !important;
		width: 74rpx;
		height: 50rpx;
		text-align: center;
		color: #323232;
		font-size: 28rpx;
	}

	.commoDity_fd6_0_c3_c1_c0 {
		height: 50rpx;
		width: 52rpx;
		transform: translateY(5rpx);
	}

	.commoDity_fd6_0_c3_c1_c2 {
		height: 50rpx;
		width: 52rpx;
		transform: translateY(5rpx);
	}

	.commoDity_fd6_0_c4 {
		background: #AD3823;
		background-size: 100% !important;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: 500;
		margin: 0 32rpx 32rpx;
	}

	.close-box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 28rpx;
		font-weight: bold;
		margin: 0 0 auto 0;
	}

	::v-deep .uni-numbox__minus,
	::v-deep .uni-numbox__plus {
		background-color: transparent !important;
	}

	::v-deep .uni-numbox__value {
		background-color: #F7F7F7;
	}

	.productDetails_fd2_1_c2_c1_c6 {
		background: rgba(51, 51, 51, 1);
		color: var(--benbenFontColor3);
		background-size: 100% auto;
		border-radius: 4rpx;
		padding: 4rpx;
	}

	.productDetails_fd2_1_c2_c1_c4 {
		background: rgba(51, 51, 51, 1);
		padding: 4rpx;
		background-size: 100% auto;
		color: var(--benbenFontColor3);
		border-radius: 4rpx;
	}

	.productDetails_fd2_1_c2_c1_c2 {
		background: rgba(51, 51, 51, 1);
		color: var(--benbenFontColor3);
		padding: 4rpx;
		background-size: 100% auto;
		border-radius: 4rpx;
	}

	.productDetails_fd2_1_c2_c1_c1 {
		margin: 0rpx 4rpx 0rpx 4rpx;
	}

	.productDetails_fd2_1_c2_c1_c0 {
		background: rgba(51, 51, 51, 1);
		padding: 4rpx;
		background-size: 100% auto;
		border-radius: 4rpx;
		color: var(--benbenFontColor3);
	}

	.productDetails_fd2_1_c2_c1 {
		background: #FFFFFF;
	}

	.productDetails_fd2_1_c2_c0 {
		color: #333333;
		font-size: 24rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 9rpx 0rpx;
	}

	.productDetails_fd2_1_c2 {
		margin: 0rpx 0rpx 0rpx 150rpx;
		font-size: 24rpx;
	}

	.productDetails_price1_fd2_1_c1_c1_c2 {
		font-size: 28rpx;
	}

	.productDetails_fd2_1_c1_c1_c2 {
		color: rgba(227, 227, 227, 1);
		font-weight: 600;
	}

	.productDetails_fd2_1_c1_c1_c1 {
		color: rgba(227, 227, 227, 1);
		font-size: 20rpx;
		font-weight: 500;
		margin: 0rpx 0rpx 0rpx 10rpx;
	}

	.productDetails_fd2_1_c1_c1_c0 {
		color: #E3E3E3;
		font-size: 24rpx;
		font-weight: 400;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.productDetails_price2_fd2_1_c1_c0_c2 {
		font-size: 22rpx;
	}

	.productDetails_price1_fd2_1_c1_c0_c2 {
		font-size: 32rpx;
	}

	.productDetails_fd2_1_c1_c0_c2 {
		color: var(--benbenFontColor3);
		font-weight: 600;
	}

	.productDetails_fd2_1_c1_c0_c1 {
		color: var(--benbenFontColor3);
		font-size: 20rpx;
		font-weight: 500;
		margin: 0rpx 0rpx 0rpx 10rpx;
	}

	.productDetails_fd2_1_c1_c0_c0 {
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 400;
		margin: 0rpx 34rpx 0rpx 0rpx;
	}

	.productDetails_fd2_1_c1_c0 {
		margin: 0rpx 0rpx 9rpx 0rpx;
	}

	.productDetails_fd2_1_c1 {
		margin: 0rpx 0rpx 0rpx 21rpx;
	}

	.productDetails_fd2_1_c0 {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
	}

	.productDetails_fd2_1 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/598.png) no-repeat;
		padding: 30rpx 16rpx 17rpx 28rpx;
		background-size: 100% 100%;
	}

	.search_fd6_0_c1_c0_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
	}

	.search_fd6_0_c1_c0_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.search_fd6_0_c1 {
		padding: 0rpx 0rpx 58rpx 0rpx;
	}

	.search_fd6_0_c0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.search_fd6_0_c0_c2 {
		margin: 0rpx 2rpx 0rpx 0rpx;
	}

	.search_fd6_0_c0_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin: 0rpx 16rpx 0rpx 16rpx;
	}

	.search_fd6_0_c0_c1_c0 {
		width: 32rpx;
		height: 10rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.search_fd6_0_c0_c1 {
		padding: 40rpx 0rpx 48rpx 0rpx;
	}

	.search_fd6_0_c0_c0 {
		width: 40rpx;
	}

	.search_fd6_0_c0 {
		padding: 0rpx 13rpx 0rpx 0rpx;
	}

	.search_fd6_0 {
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>